<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>index</title>
	</head>
	<body>
	    <embed src="f2.svg" width="800" height="100%" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/"  id="em"/>
		<button onclick="change()">添加矩形</button>
	</body>
<script>
function createRect(svgdoc) {
    var rectObj = document.createElementNS("http://www.w3.org/2000/svg","rect");
		if(rectObj){
            rectObj.setAttribute("x",200);
			rectObj.setAttribute("y",100);
			rectObj.setAttribute("width",80);
			rectObj.setAttribute("height",80);
			rectObj.setAttribute("style","fill:rgb(100,220,255);stroke-width:1;stroke:rgb(0,0,0)");
			svgdoc.appendChild(rectObj);
		}


}
function change() {
	var embedEle=document.getElementById("em");
	console.log(embedEle);
	var svg=embedEle.getSVGDocument();
	console.log(svg);
	var svgdoc=svg.documentElement;
	console.log(svgdoc);
    
	// var tuoyuan=svgdoc.getElementsByTagName("ellipse")[0];
	// tuoyuan.setAttribute("rx","100");

    const viewBox = '<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="100%" height="100%" />  <circle cx="50%" cy="50%" r="4" fill="white" />';
    //svgdoc.appendChild(viewBox);
    createRect(svgdoc);
}
</script>	
</html>